<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 基础表格
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="delAllSelection"
                >批量删除
                </el-button>
                <el-input v-model="query.title" placeholder="标题" class="handle-input mr10"></el-input>
                <el-input v-model="query.author" placeholder="作者" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>


            <el-table
                    :data="list"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="create_time"
                        label="创建日期"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="update_time"
                        label="更新日期"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题">
                </el-table-column>
                <el-table-column
                        prop="author"
                        label="作者"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="hits"
                        label="点赞数"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="copyfrom"
                        label="来源"
                        width="100">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query.currentPage"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'list',
        data() {
            return {
                query: {
                    address: '',
                    name: '',
                    currentPage: 1,
                    pageSize: 10
                },
                list: []
            };
        },
        created() {
            this.getData();
        },
        methods: {
            // 获取 easy-mock 的模拟数据
            getData() {
                this.$axios.get('/manage/article', {
                    params: this.query
                }).then(res => {
                    this.list = res.data;
                })
            },
            delAllSelection(){},
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'currentPage', 1);
                this.getData();
            },
            handleClick(row) {
                console.log(row);
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
